<template>
  <div class="dashboard-container">
    <!-- 欢迎卡片 -->
    <div class="welcome-card">
      <h2>欢迎，{{ displayName }}！</h2>
      <p>{{ welcomeMessage }}</p>
      <div class="user-info">
        <div class="info-item">
          <div class="info-label">{{ userRole === 0 ? '学号' : '用户名' }}</div>
          <div class="info-value">{{ userRole === 0 ? (userInfo?.studentId || userInfo?.username) : userInfo?.username }}</div>
        </div>
        <div class="info-item" v-if="userRole === 0">
          <div class="info-label">班级</div>
          <div class="info-value">{{ userInfo?.className || '未分配' }}</div>
        </div>
        <div class="info-item">
          <div class="info-label">角色</div>
          <div class="info-value">{{ roleText }}</div>
        </div>
        <div class="info-item" v-if="userRole !== 0">
          <div class="info-label">权限</div>
          <div class="info-value">{{ userRole === 2 ? '全部权限' : '管理权限' }}</div>
        </div>
      </div>
    </div>
    
    <!-- 学生快捷操作 -->
    <div v-if="userRole === 0" class="quick-actions">
      <h3>快捷操作</h3>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="action-card" @click="goToScores">
            <el-icon :size="32" class="action-icon">
              <Document />
            </el-icon>
            <div class="action-title">成绩查询</div>
            <div class="action-desc">查看我的考试成绩</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="action-card disabled">
            <el-icon :size="32" class="action-icon">
              <Calendar />
            </el-icon>
            <div class="action-title">考试安排</div>
            <div class="action-desc">查看考试时间安排</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="action-card disabled">
            <el-icon :size="32" class="action-icon">
              <User />
            </el-icon>
            <div class="action-title">个人信息</div>
            <div class="action-desc">查看和修改个人信息</div>
          </div>
        </el-col>
      </el-row>
    </div>
    
    <!-- 管理员功能卡片 -->
    <div v-if="userRole === 1" class="management-cards">
      <h3>管理功能</h3>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="mgmt-card" @click="goToScores">
            <el-icon :size="32" class="card-icon">
              <Document />
            </el-icon>
            <div class="card-title">成绩管理</div>
            <div class="card-desc">录入和管理学生成绩</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="mgmt-card" @click="goToStudents">
            <el-icon :size="32" class="card-icon">
              <User />
            </el-icon>
            <div class="card-title">学生管理</div>
            <div class="card-desc">管理学生信息和档案</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="mgmt-card" @click="goToClasses">
            <el-icon :size="32" class="card-icon">
              <OfficeBuilding />
            </el-icon>
            <div class="card-title">班级管理</div>
            <div class="card-desc">管理班级信息和设置</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="mgmt-card" @click="goToCourses">
            <el-icon :size="32" class="card-icon">
              <Reading />
            </el-icon>
            <div class="card-title">课程管理</div>
            <div class="card-desc">管理课程信息和安排</div>
          </div>
        </el-col>
      </el-row>
    </div>
    
    <!-- 超级管理员功能卡片 -->
    <div v-if="userRole === 2">
      <!-- 系统管理 -->
      <div class="management-cards">
        <h3>系统管理</h3>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="mgmt-card" @click="goToAdmins">
              <el-icon :size="32" class="card-icon">
                <UserFilled />
              </el-icon>
              <div class="card-title">管理员管理</div>
              <div class="card-desc">管理系统管理员账户</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="mgmt-card" @click="goToSystem">
              <el-icon :size="32" class="card-icon">
                <Setting />
              </el-icon>
              <div class="card-title">系统设置</div>
              <div class="card-desc">系统参数和配置管理</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="mgmt-card disabled">
              <el-icon :size="32" class="card-icon">
                <Monitor />
              </el-icon>
              <div class="card-title">系统监控</div>
              <div class="card-desc">系统运行状态监控</div>
            </div>
          </el-col>
        </el-row>
      </div>
      
      <!-- 业务管理 -->
      <div class="business-cards">
        <h3>业务管理</h3>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="mgmt-card" @click="goToScores">
              <el-icon :size="32" class="card-icon">
                <Document />
              </el-icon>
              <div class="card-title">成绩管理</div>
              <div class="card-desc">全局成绩管理</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="mgmt-card" @click="goToStudents">
              <el-icon :size="32" class="card-icon">
                <User />
              </el-icon>
              <div class="card-title">学生管理</div>
              <div class="card-desc">学生信息管理</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="mgmt-card" @click="goToClasses">
              <el-icon :size="32" class="card-icon">
                <OfficeBuilding />
              </el-icon>
              <div class="card-title">班级管理</div>
              <div class="card-desc">班级信息管理</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="mgmt-card" @click="goToCourses">
              <el-icon :size="32" class="card-icon">
                <Reading />
              </el-icon>
              <div class="card-title">课程管理</div>
              <div class="card-desc">课程信息管理</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    
    <!-- 统计信息 -->
    <div v-if="userRole !== 0" class="stats-section">
      <h3>系统统计</h3>
      <el-row :gutter="20">
        <el-col v-if="userRole === 2" :span="4">
          <div class="stat-card">
            <div class="stat-number">5</div>
            <div class="stat-label">管理员数量</div>
          </div>
        </el-col>
        <el-col :span="userRole === 2 ? 4 : 6">
          <div class="stat-card">
            <div class="stat-number">1,234</div>
            <div class="stat-label">学生总数</div>
          </div>
        </el-col>
        <el-col :span="userRole === 2 ? 4 : 6">
          <div class="stat-card">
            <div class="stat-number">56</div>
            <div class="stat-label">班级总数</div>
          </div>
        </el-col>
        <el-col :span="userRole === 2 ? 4 : 6">
          <div class="stat-card">
            <div class="stat-number">89</div>
            <div class="stat-label">课程总数</div>
          </div>
        </el-col>
        <el-col :span="userRole === 2 ? 4 : 6">
          <div class="stat-card">
            <div class="stat-number">15,678</div>
            <div class="stat-label">成绩记录</div>
          </div>
        </el-col>
        <el-col v-if="userRole === 2" :span="4">
          <div class="stat-card">
            <div class="stat-number">99.9%</div>
            <div class="stat-label">系统可用性</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user'
import { 
  Document, 
  Calendar, 
  User, 
  UserFilled, 
  OfficeBuilding, 
  Reading, 
  Setting, 
  Monitor 
} from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()

// 用户信息
const userInfo = computed(() => userStore.userInfo)
const userRole = computed(() => {
  // 优先使用数字格式的role
  let role = userInfo.value?.role

  // 如果没有role，从userType转换
  if (role === undefined || role === null) {
    const userType = userInfo.value?.userType
    if (userType === 'student') role = 0
    else if (userType === 'admin') role = 1
    else if (userType === 'super_admin') role = 2
  }

  return role || 0
})

// 显示名称
const displayName = computed(() => {
  if (!userInfo.value) return '用户'
  
  if (userRole.value === 0) {
    return userInfo.value.name || '同学'
  }
  
  return userInfo.value.username || userInfo.value.name || '管理员'
})

// 欢迎信息
const welcomeMessage = computed(() => {
  switch (userRole.value) {
    case 0:
      return '欢迎使用学生成绩管理系统'
    case 1:
      return '欢迎使用学生成绩管理系统 - 管理员控制台'
    case 2:
      return '欢迎使用学生成绩管理系统 - 超级管理员控制台'
    default:
      return '欢迎使用学生成绩管理系统'
  }
})

// 角色文本
const roleText = computed(() => {
  switch (userRole.value) {
    case 0:
      return '学生'
    case 1:
      return '普通管理员'
    case 2:
      return '超级管理员'
    default:
      return '未知角色'
  }
})

// 导航方法
const goToScores = () => router.push('/score')
const goToStudents = () => router.push('/student')
const goToClasses = () => router.push('/class')
const goToCourses = () => router.push('/course')
const goToAdmins = () => router.push('/admin')
const goToSystem = () => router.push('/system')
</script>

<style lang="scss" scoped>
.dashboard-container {
  .welcome-card {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-bottom: 20px;

    h2 {
      color: #333;
      margin-bottom: 15px;
      font-size: 24px;
    }

    p {
      color: #666;
      margin-bottom: 25px;
      font-size: 16px;
    }

    .user-info {
      display: flex;
      justify-content: center;
      gap: 40px;

      .info-item {
        text-align: center;

        .info-label {
          font-size: 14px;
          color: #999;
          margin-bottom: 5px;
        }

        .info-value {
          font-size: 16px;
          font-weight: 500;
          color: #333;
        }
      }
    }
  }

  .quick-actions {
    margin-bottom: 20px;

    h3 {
      color: #333;
      margin-bottom: 20px;
      font-size: 18px;
    }

    .action-card {
      background: white;
      padding: 25px;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      text-align: center;
      cursor: pointer;
      transition: all 0.3s;

      &:hover:not(.disabled) {
        transform: translateY(-2px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      }

      &.disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }

      .action-icon {
        color: #409eff;
        margin-bottom: 15px;
      }

      .action-title {
        font-size: 16px;
        font-weight: 500;
        color: #333;
        margin-bottom: 8px;
      }

      .action-desc {
        font-size: 14px;
        color: #666;
      }
    }
  }

  .management-cards,
  .business-cards {
    margin-bottom: 20px;

    h3 {
      color: #333;
      margin-bottom: 20px;
      font-size: 18px;
    }

    .mgmt-card {
      background: white;
      padding: 25px;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      text-align: center;
      cursor: pointer;
      transition: all 0.3s;

      &:hover:not(.disabled) {
        transform: translateY(-2px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      }

      &.disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }

      .card-icon {
        color: #409eff;
        margin-bottom: 15px;
      }

      .card-title {
        font-size: 16px;
        font-weight: 500;
        color: #333;
        margin-bottom: 8px;
      }

      .card-desc {
        font-size: 14px;
        color: #666;
      }
    }
  }

  .stats-section {
    h3 {
      color: #333;
      margin-bottom: 20px;
      font-size: 18px;
    }

    .stat-card {
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      text-align: center;

      .stat-number {
        font-size: 24px;
        font-weight: bold;
        color: #409eff;
        margin-bottom: 8px;
      }

      .stat-label {
        font-size: 12px;
        color: #666;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .dashboard-container {
    .welcome-card {
      .user-info {
        flex-direction: column;
        gap: 20px;
      }
    }

    .quick-actions,
    .management-cards,
    .business-cards,
    .stats-section {
      .el-col {
        margin-bottom: 15px;
      }
    }
  }
}
</style>
